<script setup>

import { addLogisticsCompanyApi, getLogisticsCompanyListApi, updateLogisticsCompanyApi } from '@/api/logisticsCompany';
import { addLogisticsPriceApi, updateLogisticsPriceApi } from '@/api/logisticsPrice';
import { ElMessage } from 'element-plus';
import { getCurrentInstance, onMounted, ref } from 'vue';

const companyList = ref([])
const categoryType = ref([
    {id: '1', name: '同城'},
    {id: '2', name: '同省'},
    {id: '3', name: '跨省'},
    {id: '4', name: '经济区互寄'},
])
//获取当前Vue实例
const instance = getCurrentInstance()
const ruleFormRef = ref(null)
const dialogFormVisible = ref(false)
const title = ref('')
const priceForm = ref({
    id: '',
    cubePrice: '',
    kilogramPrice: '',
    transKilometerPrice: '',
    category: '',
    logisticsCompanyId: '',
})

const reset = () => {
    priceForm.value = {
        id: '',
        cubePrice: '',
        kilogramPrice: '',
        transKilometerPrice: '',
        category: '',
        logisticsCompanyId: '',
    }
}

const save =async () => {
     if (!ruleFormRef) return
    await ruleFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            let res = null
            if (priceForm.value.id) {
                res = await updateLogisticsPriceApi(priceForm.value)
            }else {
                res = await addLogisticsPriceApi(priceForm.value)
            }
            if (res.code == 1) {
                ElMessage.success('操作成功')
                dialogFormVisible.value = false
                instance.emit('refresh')
            }else{
                ElMessage.error('操作失败')
            }
        } else {
        console.log('error submit!', fields)
        }
    })
}


const rules = ref({
  cubePrice: [
    { required: true, message: '费用不能为空', trigger: 'blur' }
  ],
})

const getCompanyList = async () => {
    const res = await getLogisticsCompanyListApi()
    companyList.value = res.data
}

defineExpose({
    dialogFormVisible,
    title,
    priceForm,
    reset,
})

onMounted(() => {
    getCompanyList()
})

</script>

<template>
    <el-dialog style="width: 400px;" v-model="dialogFormVisible" :title="title">
    <el-form :model="priceForm" :rules="rules" ref="ruleFormRef" label-width="auto">
      <el-form-item label="每立方费用" placeholder="请输入" prop="cubePrice" >
        <el-input v-model="priceForm.cubePrice" />
      </el-form-item>
      <el-form-item label="每千克费用" placeholder="请输入" >
        <el-input v-model="priceForm.kilogramPrice" />
      </el-form-item>
      <el-form-item label="每千米运输费用" placeholder="请输入" >
        <el-input v-model="priceForm.transKilometerPrice" />
      </el-form-item>
      <el-form-item label="类型" placeholder="请选择">
        <el-select v-model="priceForm.category" placeholder="请选择">
          <el-option v-for="item in categoryType" :label=item.name  :value=item.id />
        </el-select>
      </el-form-item>
      <el-form-item label="所属公司" placeholder="请选择">
        <el-select v-model="priceForm.logisticsCompanyId" placeholder="请选择">
          <el-option v-for="item in companyList" :label=item.companyName  :value=item.id />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>